<%-- 
    Document   : testproduct
    Created on : Jun 9, 2012, 11:21:24 PM
    Author     : HoangVu
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script type="text/javascript">
            var count = 0;
            var cells = [];
            var xmlHttp;
            var xmlDOM;

            function addRow(tableId, cells)
            {
                var tableElem = document.getElementById(tableId);
                var newRow = tableElem.insertRow(tableElem.rows.length);
                var newCell;
                for (i = 0; i < cells.length; i++) {
                    newCell = newRow.insertCell(newRow.cells.length);
                    newCell.innerHTML = cells[i];
                }
                return newRow;
            }
            function deleteRow(tableId, rowNumber)
            {
                
                var tabElem = document.getElementById(tableId);
                
                if(rowNumber > 0 && rowNumber < tabElem.rows.length)
                {
                    tabElem.deleteRow(rowNumber);
                }
                else {
                    alert("Failed");
                }
                
            }

            function GetXMLHttpObject()
            {
                var xmlHttp = null;
                try
                {
                    xmlHttp = new XMLHttpRequest();

                }catch(e)
                {
                    try{
                        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
                    }
                    catch(e)
                    {
                        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                }
                return xmlHttp;
            }

            function searchNode (node, tableName)
            {
                if(node == null)
                {
                    return;
                }
              
                if(node.tagName == "productName")
                {
                    var tmp = node.firstChild.nodeValue;
                    var parent = node.parentNode;
                    count++;

                    cells[0] = count;
                    cells[1] = node.firstChild.nodeValue;
                    var sibling = node.nextSibling;
                    cells[2] = sibling.firstChild.nodeValue;
                    var sibling1 = sibling.nextSibling;
                    cells[3] = sibling1.firstChild.nodeValue;
                    var sibling2 = sibling1.nextSibling;
                    cells[4] = "<img src = ' "+sibling2.firstChild.nodeValue + "' />" ;
                    addRow(tableName, cells)
                }
                var childs = node.childNodes;
             
                for (var i = 0; i < childs.length; i++) {
                    searchNode(childs[i], tableName)
                }
            }

            function searchNodebyName (tabName)
            {

                var strSearch = document.getElementById("search1").value;

             //   path="//product[normalize-space(productName)='" +strSearch +"']";
               path = "//product[productName='"+strSearch+"']";
                // code for IE
            if (window.ActiveXObject)
            {               
                var returnnodes=xmlDOM.selectNodes(path);

                var tableElem = document.getElementById(tabName);
                var i=1;
                while (i<tableElem.rows.length)
                {
                    deleteRow(tabName, i);
                }
                
                   for (var i =0; i<returnnodes.length;i++)
               {
                    var nodeslist = returnnodes.item(i);
                    var countnode= nodeslist.childNodes.length-1;
                    for(var j=0; j <countnode; j++)
                        {
                            if(j == countnode-1)
                                {
                                    cells[j] =  "<img src= '"+nodeslist.childNodes.item(j).text+"'/>" ;
                                } else {
                                     cells[j] = nodeslist.childNodes.item(j).text;
                                }

                          alert(cells);
                        }
                   addRow(tabName, cells);
               }
            }
            // code for Mozilla, Firefox, Opera, etc.
            else if (document.implementation && document.implementation.createDocument)
            {
                var nodes=xmlDOM.evaluate(path, xmlDOM, null, XPathResult.ANY_TYPE, null);
                var result=nodes.iterateNext();

                while (result)
                {
                    document.write(result.childNodes[0].nodeValue);
                    document.write("<br />");
                    result=nodes.iterateNext();
                }
            }
               
            }

            function traversalDOMTree (tableName)
            {
                //Delete all table
                var tableElem = document.getElementById(tableName);
                var i=1;
                while (i<tableElem.rows.length)
                {
                    deleteRow(tableName, i);
                }
                count = 0;
                //parsing
                update();
                alert (xmlDOM);
                if(xmlDOM.parseError.errorCode != 0)
                {
                    alert("Error : " + xmlDOM.parseError.reason);
                }
                else
                {
                    searchNode(xmlDOM, tableName);
                }
            }

             function update()
            {
               xmlHttp = GetXMLHttpObject();
               if(xmlHttp == null)
                   {
                       alert("Your browser does not support AJAX");
                       return;
                   }
                   var url = "MarshallProductToJavScript";
                   xmlHttp.open("GET", url, true);
                   xmlHttp.send(null)
                   xmlDOM = xmlHttp.responseXML;
                  
            }

        </script>
    </head>
    <body onload="traversalDOMTree('dataTable')">
        <h1>Hello World!</h1>
         <form action="myForm">
             <input id="search1" type="text" name="txtSearch" value="" /> <br />
            <input type="button" value="Search" onclick="searchNodebyName('dataTable')"/>

        </form>

         <table border="1" id="dataTable">
                <tr>
                    <th>No.</th>
                    <th>Name</th>
                    <th>Price</th>
                    <th>Quantity</th>
                    <th>Image</th>
                </tr>

        </table>
    </body>
</html>
